<template>
<div>
    <cjcNav title="电子注册单" @customRouter="customRouter">
        <div class="cjnav-flow" @click="registFlow">注册流程</div>
    </cjcNav>
    <div class="all-content">
        <div class="out-box">
            <div class="in-box">
                <h3>西城欢迎你</h3>
                <div class="qr">
                    <barcode :value="barcode_value" :options="barcode_option"></barcode>
                </div>
                <div class="ksh">
                    {{barcode_value}}
                </div>
                <div class="stu-content" v-for="(item, index) in lists" :key="index" >
                    {{index}}:<span>{{item}}</span>
                </div>
            </div>
            <!-- <div class="img-box">
            </div> -->
        </div>
        <div class="congrat">
            恭喜你，已完成网上注册！
        </div>
        
    </div>
    <div class="hr"></div>
    <div class="register-img-text">
        本服务由四川萃菁池科技有限公司智慧校园研究院提供
    </div>
</div>
</template>

<script>
import Vue from 'vue'
import VueBarcode from '@xkeshi/vue-barcode'
Vue.component('barcode', VueBarcode)
export default {
    name: 'ele_register_form',
    data() {
        return {
            barcode_option: {
                displayValue: false,
                background: 'white',
                height: '50px',
            },
            barcode_value: '',
            lists: {}
        }
    },
    methods: {
        customRouter() {
            this.$cjc.closeWebView()
        },
        registFlow() {
            this.$router.push({
                name: 'comfirm_infomation',
                params: {
                    formPage: 'ele_register_form'
                }
            })
        },
    },
    created() {
        // 这里调用接口获取信息
        let Vm = this
        Vm.barcode_value = Vm.$store.state.userInfo.KSH
        Vm.$Message.loading({
            content: '生成中....',
            duration: 0
        })
        Vm.$store
            .dispatch('getRegistInfo', {
                ksh: Vm.$store.state.userInfo.KSH
            })
            .then(res => {
                Vm.$Message.destroy()
                if (res.data.status === 1000) {
                    Vm.lists = res.data.result
                } else {
                    Vm.$Message.error(res.data.result.msg)
                }
            })
    }
}
</script>

<style lang="less">
.cjnav-flow{
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    margin-right: 20%;
    color: #2d8cf0;
}
.all-content{
    min-height: ~'calc(100vh - 120px)'
}
.out-box{
    width: 90%;
    margin: 20px auto;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: auto;
    min-height: 60vh;
    background: #33CCFF;
    position: relative;
    border-top: solid 1px transparent;
    .in-box{
        width: 80%;
        margin: 0 auto;
        h3{
            font-size: 20px;
            color: white;
            text-align: center;
            font-weight: 500;
            margin-top: 50px;
        }
        canvas{
            width: 100%;
            height: 61px;
        }
        .stu-content{
            font-size: 14px;
            color: black;
            span{
                margin-left: 5px;
            }
        }
        .qr{
            height: 66px;
            width: 100%;
        }
        .ksh{
            width: 100%;
            height: auto;
            color: black;
            text-align: center;
            margin-bottom: 30px;
        }
    }
    .img-box{
        height: 80vh;
        width: 80%;
        margin: 15px auto;
        // background: red;
        overflow: hidden;
        padding: 0 20px;
        font-size: 15px;
        position: absolute;
        top: 0;
        left: 10%;
        

    }
}
.congrat{
    width: 100%;
    font-size: 25px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin-top: 103px;
}
.register-bgimg {
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.register-img-content {
    width: 944 / 1080 * 100vw;
    height: 1410 / 1872 * 100vh;
    margin: 54 / 1872 * 100vh auto;
    font-size: 12px;
    .image-name {
        color: #626262;
        padding-left: 280 / 958 * 100vw;
        margin-top: 611 / 1875 * 100vh;
        font-size: 12px;
        transform: scale(0.8);
    }
    .image-text {
        line-height: 1.8em;
        padding-left: 200 / 958 * 100vw;
        font-size: 12px;
        transform: scale(0.8);
        color: #1096af;
    }
}
.hr {
    height: 1px;
    width: 100%;
    background-color: #cccccc;
}
.register-img-text {
    margin: 10px auto;
    font-size: 12px;
    text-align: center;
    color: #999;
}
</style>
